<template>
  <div class="loginfirst">
    <!-- login图 -->
    <div class="pic">
      <img src="../../public/image/logo3@2x.png" alt="" />
    </div>
    <!-- 手机号登录按钮 -->
    <van-button class="btn tel" round type="info" block size="large" color="#FF522E" @click="tel"
      >手机号登录</van-button
    >
    <!-- 微信登录按钮 -->
    <van-button class="btn" plain round type="info" block size="large" color="#CAC9C9">微信登录</van-button>
    <!-- 同意《萌宠用户协议》和《萌宠隐私政策》 -->
    <div class="agree">
      <van-checkbox v-model="checked"
        ><span class="text1">登录注册代表同意</span>
        <span class="text2">《萌宠用户协议》和《萌宠隐私政策》</span></van-checkbox
      >
    </div>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="title">温馨提示</div>
          <div class="infos">
            <p>亲爱的用户，感谢您信任并使用萌宠！</p>
            <p>
              我们依据相关法律制定了《萌宠用户协议》和《萌宠隐私政策》，请您在点击同意之前仔细阅读并充分理解相关条款，其中重点条款已为您标注，方便您了解自己的权力。
            </p>
            <h4>我们将通过《萌宠隐私政策》向您说明：</h4>
            <h4>
              1.为了您可以更好的享受萌宠服务，我们会根据您的授权内容，收集和使用对应的必要信息（例如您的电话微信信息、配送地址等）
            </h4>
            <h4>2.您可以对上述信息进行访问、更正、删除以及注销账户。我们也将提供专门的个人信息保护练习方式。</h4>
            <h4>3.未经您的授权同意，我们不会将上述信息共享给第三方或用于您未授权的其他用途</h4>
          </div>
          <!-- anniu -->
          <div class="btns">
            <van-button class="btnone refuse" round hairline type="primary" color="btnone #999999" @click="refused"
              >拒绝</van-button
            >
            <van-button class="btnone agreed" round hairline type="primary" color="#FF522E" @click="agreed"
              >同意</van-button
            >
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  name: 'Loginf',
  data() {
    return { checked: false, show: true, ts: true }
  },
  methods: {
    // tiaozhuan
    tel() {
      if (!this.checked) {
        return Toast('请勾选协议')
      }
      this.$router.push('/Login_phone')
    },
    //
    agreed() {
      ;(this.checked = true), (this.show = false)
    },
    refused() {
      ;(this.checked = false), (this.show = false)
    },
  },
}
</script>

<style scoped lang="less">
.loginfirst {
  // <!-- login图 -->

  .pic {
    width: 1.86rem;
    height: 2.45rem;
    margin-top: 3.44rem;
    margin-left: 2.96rem;
  }
  .btn {
    width: 4.53rem;
    height: 0.73rem;
    font-size: 0.34rem;
    margin-left: 1.63rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  // <!-- 手机号登录按钮 -->
  .tel {
    margin-top: 2.83rem;
    margin-bottom: 0.65rem;
  }
  // <!-- 微信登录按钮 -->
  // <!-- 同意《萌宠用户协议》和《萌宠隐私政策》 -->
  .agree {
    width: 4.53rem;
    font-size: 0.2rem;
    .text1 {
      color: #999999;
    }
    margin-left: 1.63rem;
    margin-top: 0.65rem;
  }
  // zhezhao
  .wrapper {
    height: 100%;
  }
  .block {
    margin-top: 4.86rem;
    margin-left: 0.66rem;
    width: 6.17rem;
    height: 7.78rem;
    background-color: #fff;
    border-radius: 0.2rem;
    .title {
      width: 100%;
      height: 1.26rem;
      font-size: 0.34rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid;
    }
    .infos {
      margin-top: 0.29rem;
      width: 100%;
      height: 5.12rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      p {
        width: 5.72rem;
        font-size: 0.22rem;
        color: #333;
      }
      h4 {
        width: 5.72rem;

        font-size: 0.22rem;
      }
    }
    .btns {
      width: 100%;
      height: 1.2rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .btnone {
        width: 2.21rem;
        height: 0.73rem;
      }
    }
  }
}
</style>
